<template>
  <div class="settled">
    <div class="settled-img clear"><img src="../../../../static/images/settled-1.png" class="fl"></div>
    <div class="settled-content padding-tb20">
      <div class="settled-top">
        <div class="settled-title"><span>入驻申请</span></div>
        <div class="settled-introduced">目前仅支持成都市，其它城市请拭目以待</div>
      </div>
      <div class="settled-center">
        <div>
          <p>资料填写</p>
          <img src="../../../../static/images/settled-2.png">
          <div><p><span class="fl">商家名称：</span><input type="text" v-model="merchantName" class="fl" placeholder-style="font-size: 24rpx;" placeholder="须填写全称，同相关证照登记一致"></p></div>
          <div><p><span class="fl">总面积：</span><input type="number" v-model="size" class="fl" placeholder-style="font-size: 24rpx;" placeholder="1"></p></div>
          <div><p><span class="fl">所在区域：</span><input type="text" class="fl" placeholder-style="font-size: 24rpx;" placeholder="1"></p></div>
          <div><p><span class="fl">详细地址：</span><input type="text" v-model="address" class="fl" placeholder-style="font-size: 24rpx;" placeholder="填写详细地址，无须包含区域"></p></div>
          <div><p><span class="fl">主营项目：</span><input type="text" v-model="items" class="fl" placeholder-style="font-size: 24rpx;" placeholder="填写主营业务和可提供的服务信息"></p></div>
          <div><p><span class="fl">联系人：</span><input type="text" v-model="userName" class="fl" placeholder-style="font-size: 24rpx;" placeholder="填写联系人姓名"></p></div>
          <div><p><span class="fl">联系电话：</span><input type="number" v-model="userIphone" maxlength="11" class="fl" placeholder-style="font-size: 24rpx;" placeholder="填写常用电话，以便我们能联系到你"></p></div>
          <div>
            <label class="submit" @click="submits();">提交</label>
          </div>
        </div>
      </div>
    </div>
    <div class="settled-footer clear">
      <img src="../../../../static/images/settled-3.png" class="fl footer-img">
    </div>
    <div class="copyRight">
      <div class="copyRight-name">找玩网</div>
      <div class="copyRight-name">五朵云.休闲农旅全场景运营服务商 版权所有</div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "settled",
    data () {
      return {
        merchant: {
          merchantName: "",
          size: "",
          area: {
            citys: "",
            provinces: "",
            areas: ""
          },
          address: "",
          items: "",
          userName: "",
          userIphone: ""

        }
      }
    },
    components: {

    },
    methods: {
      submits: function () {
        if(!this.merchantName) {
          wx.showToast({
            title: '请输入商家名称',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        if(!this.size) {
          wx.showToast({
            title: '请输入总面积',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        if(!this.address) {
          wx.showToast({
            title: '请输入详细地址',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        if(!this.items) {
          wx.showToast({
            title: '请输入主营项目',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        if(!this.userName) {
          wx.showToast({
            title: '请输入联系人姓名',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        if(!this.userIphone) {
          wx.showToast({
            title: '请输入联系人电话',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if(!reg.test(this.userIphone)){
          wx.showToast({
            title: '请输入正确的手机号码',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        wx.showToast({
          title: '申请入驻已提交',
          icon: 'none',
          duration: 1000
        });
      }
    },
    computed: {

    },
    created() {

    }
  }
</script>

<style scoped lang=scss>
  @import "../../../../static/css/index.css";
  $color-666: #666666;
  $color-fff: #ffffff;
  $color-333: #333333;
  $color-999: #999999;
  $color-lightBlue: #70b3e0;
  .settled {
    .settled-img {
      img {
        width: 100%;
      }
    }
    .settled-content {
      background: $color-fff;
      text-align: center;
      .settled-top {
        width: 560rpx;
        margin: 0 auto;
        .settled-title {
          border-bottom: 1rpx solid $color-lightBlue;
          span {
            width:200rpx;
            height:64rpx;
            line-height:64rpx;
            text-align:center;
            background:$color-lightBlue;
            font-size:30rpx;
            color: $color-fff;
            display: inline-block;
            border-radius: 30rpx;
            position: relative;
            top: 32rpx;
          }
        }
        .settled-introduced {
          font-size: 22rpx;
          color: #ff765e;
          margin-top: 60rpx;
        }
      }
      .settled-center {
        margin-top: 50rpx;
        background-color: #acdbf9;
        padding: 25rpx 25rpx 70rpx 25rpx;
        > div {
          background-color: $color-fff;
          padding-bottom: 50rpx;
          border-radius: 10rpx;
          > img {
            width: 100%;
            height: 26rpx;
          }
          > div {
            height: 92rpx;
            line-height: 92rpx;
            margin-top: 42rpx;
            border-radius: 10rpx;
            font-size: 30rpx;
            color: $color-666;
            padding: 0 45rpx;
            p {
              height:92rpx;
              line-height:92rpx;
              border: 1rpx solid $color-lightBlue;
            }
            span {
              display: inline-block;
              width: 160rpx;
              text-align: right;
            }
            input {
              height: 92rpx;
              line-height: 92rpx;
              text-align: left;
              width: 400rpx;
            }
            .submit {
              height: 92rpx;
              line-height: 92rpx;
              background: $color-lightBlue;
              width: 100%;
              text-align: center;
              display: inline-block;
              font-size: 36rpx;
              color: $color-fff;
              border-radius: 10rpx;
            }
          }
        }
      }
    }
    .settled-footer {
      overflow: hidden;
      margin-top: 50rpx;
      .footer-img {
        width: 100%;
        height: 3000rpx;
      }
    }
  }
</style>
